<template>
  <div style="width:100%;height:100%;" id="testRate"></div>
</template>

<script>
  const echarts = require('echarts');
  export default {
    name: 'testRate',
    props: {
      testRate: Array,
    },
    data() {
      return {};
    },
    methods: {
      init() {
        let testRate = this.testRate;
        let testRateMap = echarts.init(document.getElementById('testRate'));
        let xAxisTxt = [];
        let dataMissRate = [];
        let dataDelayRate = [];
        let dataMeanBugRate = [];
        testRate.forEach((item) =>{
          xAxisTxt.push(item.month);
          dataMissRate.push(parseFloat(item.missRate));
          dataDelayRate.push(parseFloat(item.delayRate));
          dataMeanBugRate.push(parseFloat(item.hotalDefectRate));
        });
        let option = {
          // title: {
          //   text: '有效缺陷数',
          // },

          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data:['遗漏率','延期率','参考缺陷率']
          },
          xAxis: [
            {
              type: 'category',
              data: xAxisTxt,
              // boundaryGap: false,
              // splitLine: {show: false},
              // axisLabel: {show: false},
              // axisTick: {show: false},
              // axisLine: {show: false}
            }
          ],
          yAxis: [
            {
              type: 'value',
              // axisLine: {show: false},
              // axisTick: {show: false},
              axisLabel: {
                formatter: '{value}%'
              },
            }
          ],
          grid: {
            left:'12%',
            top: '20%',
            bottom: '20%'
          },
          series: [
            {
              name: '参考缺陷率',
              type: 'line',
              label: {
                normal: {
                  show: false,
                  color: '#2D8cF0',
                  // formatter: "{c}%",
                  textStyle: {
                    fontSize: 16
                  }
                }
              },
              itemStyle: {
                normal: {
                  color:'#6aa2ff',
                }
              },
              areaStyle: {normal: {
                  color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      {offset: 0, color: '#6aa2ff'},
                      {offset: 0.5, color: '#bddcfb'},
                      {offset: 1, color: '#ffffff'}
                    ]
                  )
                }},
              data: dataMeanBugRate,
            },
            {
              name: '延期率',
              type: 'line',
              label: {
                normal: {
                  show: false,
                  color: '#ff7b9d',
                  // formatter: "{c}%",
                  textStyle: {
                    fontSize: 16
                  }
                }
              },
              itemStyle: {
                normal: {
                  color:'#ff7b9d',
                }
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      {offset: 0, color: '#ff7b9d'},
                      {offset: 0.5, color: '#f5c4d1'},
                      {offset: 1, color: '#ffffff'}
                    ]
                  )
                }},
              data: dataDelayRate,
            },
            {
              name: '遗漏率',
              type: 'line',
              label: {
                normal: {
                  show: false,
                  color: '#af88ff',
                  formatter: "{c}%",
                  textStyle: {
                    fontSize: 16
                  }
                }
              },
              itemStyle: {
                normal: {
                  color:'#af88ff',
                }
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      {offset: 0, color: '#af88ff'},
                      {offset: 0.5, color: '#E3C0F5'},
                      {offset: 1, color: '#ffffff'}
                    ]
                  )
                }},
              data: dataMissRate,
            }
          ]
        };
        testRateMap.setOption(option);
        // window.addEventListener('resize', function () {
        //   testRateMap.resize();
        // });
        // testRateMap.on('click', (params) => {
        //   this.$Message.info(params.name+'的'+params.seriesName+'为：'+params.value)
        // });
      }
    },
    watch: {
      testRate: {
        handler() {
          this.init()
        },
        deep: true
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.init()
      });
    }
  };
</script>

<style scoped>

</style>

